<!DOCTYPE html>
<html lang="en">
<head>
    <title>{:config('site_title')}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    {include file="common:common_css" /}
</head>
<body ontouchstart>
    <div class="weui-tab">
        <div class="weui-tab__bd">
            <div class="page-group">
                <header class="bar bar-nav">
                    <a class="button button-link button-nav pull-left" onclick="goBack('{:url('My/index')}');"><span class="icon fa fa-angle-left"></span>返回</a>
                    <h1 class="title">
                        <span>会员管理</span>
                    </h1>
                    <span class="button button-link button-nav pull-right">
                        <span class="icon fa fa-search"></span>
                        <a href="{:url('member_add')}" style="margin-left: 10px;margin-right: 10px;"><span class="icon fa fa-plus"></span></a>
                    </span>
                </header>
                <div id="scrollPage" class="content">
                    <div class="weui-pull-to-refresh__layer">
                        <div class='weui-pull-to-refresh__arrow'></div>
                        <div class='weui-pull-to-refresh__preloader'></div>
                        <div class="down">下拉刷新</div>
                        <div class="up">释放刷新</div>
                        <div class="refresh">正在刷新</div>
                    </div>
                    <div id="list" class="weui-cells_notbefore letu-customer">
                        {volist name="list" id="vo"}
                        <div class="weui-cell weui-cell_access">
                            <div class="weui-cell__bd">
                                <a href="{:letu_url('member_view',array('id'=>think_encrypt($vo['user_id'])))}">
                                <div class="weui-cell__ft">
                                    <p class="user weui-flex">
                                        <span class="weui-flex__item">账号：{$vo.user_name}</span>
                                        <span class="weui-flex__item">昵称：{$vo.nickname}</span>
                                    </p>
                                    <p class="clue_time weui-flex">
                                        <span class="weui-flex__item">{$vo.reg_time|date='Y-m-d'}</span>
                                        <span class="sell_money weui-flex__item" style="margin-left: 10px;">乐币：{$vo.lecoin}</span>
                                        <span class="weui-flex__item" style="margin-left: 10px;">等级：{:config('app.vip_level.'.$vo['vip_level'])}</span>
                                    </p>
                                </div>
                                </a>
                            </div>
                        </div>
                        {/volist}
                    </div>
                    {if condition="$list->lastPage() gt 1"}
                    <div class="weui-loadmore">
                        <span class="weui-loadmore__tips">点击加载更多</span>
                    </div>
                    {/if}
                    {if condition="$list->total() eq 0"}
                    <div class="weui-loadmore">
                        <span class="weui-loadmore__tips">暂无数据</span>
                    </div>
                    {/if}
            </div>
        </div>
        </div>
    </div>

    <div class="weui-mask"></div>
    <div class="search_panel">
        <form id="frmSearch" method="post">
            <div class="weui-cells weui-cells_form letu-cells_not_top_line">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">账号名称：</label></div>
                    <div class="weui-cell__bd">
                        <input type="text" id="user_name" name="user_name" class="weui-input" placeholder="请输入名称" maxlength="60" />
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">账号昵称：</label></div>
                    <div class="weui-cell__bd">
                        <input type="text" id="nickname" name="nickname" class="weui-input" placeholder="请输入昵称" maxlength="60" />
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">手机号：</label></div>
                    <div class="weui-cell__bd">
                        <input type="text" id="reg_mobile" name="reg_mobile" class="weui-input" placeholder="请输入手机号" maxlength="20" />
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">性别：</label></div>
                    <div class="weui-cell__bd weui-cells_checkbox">
                        {volist name="sexList" id="vo"}
                        <label class="letu-radio-inline weui-check__label">
                            <div class="weui-cell__hd">
                                <input type="radio" name="sex" class="weui-check" value="{$key}"/>
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd"><p>{$vo}</p></div>
                        </label>
                        {/volist}
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="letu-box">
                            <div class="letu-box-title">会员等级：</div>
                            <div class="letu-box-body weui-cells_checkbox">
                                {volist name="vipLevelList" id="vo"}
                                <label class="letu-radio-inline weui-check__label">
                                    <div class="weui-cell__hd">
                                        <input type="radio" name="vip_level" class="weui-check" value="{$key}"/>
                                        <i class="weui-icon-checked"></i>
                                    </div>
                                    <div class="weui-cell__bd"><p>{$vo}</p></div>
                                </label>
                                {/volist}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">用户类型：</label></div>
                    <div class="weui-cell__bd weui-cells_checkbox">
                        {volist name="userTypeList" id="vo"}
                        <label class="letu-radio-inline weui-check__label">
                            <div class="weui-cell__hd">
                                <input type="radio" name="user_type" class="weui-check" value="{$key}"/>
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd"><p>{$vo}</p></div>
                        </label>
                        {/volist}
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">用户状态：</label></div>
                    <div class="weui-cell__bd weui-cells_checkbox">
                        {volist name="userStatusList" id="vo"}
                        <label class="letu-radio-inline weui-check__label">
                            <div class="weui-cell__hd">
                                <input type="radio" name="user_status" class="weui-check" value="{$key}"/>
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd"><p>{$vo}</p></div>
                        </label>
                        {/volist}
                    </div>
                </div>
            </div>
            <div class="weui-btn-area letu-btn-search-bar">
                <button id="btnSearch" type="button" class="weui-btn weui-btn_warn">确定搜索</button>
                <button id="btnReset" type="button" class="weui-btn weui-btn_default" style="margin-left: 10px;">重置条件</button>
            </div>
        </form>
    </div>

{include file="common:common_js" /}
<script type="text/template7" id="listTemplate">
    {{#each data}}
    <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <a href="{{view_url}}">
                <div class="weui-cell__ft">
                    <p class="user weui-flex">
                        <span class="weui-flex__item">账号：{{user_name}}</span>
                        <span class="weui-flex__item">昵称：{{nickname}}</span>
                    </p>
                    <p class="clue_time weui-flex">
                        <span class="weui-flex__item">{{reg_time_format}}</span>
                        <span class="sell_money weui-flex__item" style="margin-left: 10px;">乐币：{{lecoin}}</span>
                        <span class="weui-flex__item" style="margin-left: 10px;">等级：{{vip_level_text}}</span>
                    </p>
                </div>
            </a>
        </div>
    </div>
    {{/each}}
</script>
<script type="text/javascript">
    var lastTime = '{$lastTime}';
    var totalPage = '{$list->lastPage()}';
    var scrollLoadingUrl = "{:url('member_scroll_loading')}";
    var pullToRefreshUrl = "{:url('member_pull_to_refresh')}";

    var param_json = {};
    param_json.last_time = lastTime;
    param_json.page = 1;

    function load_data(param_json){
        $.ajax({
            type:'POST',
            dataType:"json",
            data:param_json,
            url:pullToRefreshUrl,
            success:function(result){
                totalPage = result.totalPages;
                param_json.last_time = result.time;

                if(result.data.length > 0){
                    var template = $("#listTemplate").html();
                    var compiledTemplate = $.Template7.compile(template);
                    var html = compiledTemplate(result);

                    $("#list").html(html);
                }else{
                    $("#list").empty();
                }
                if(totalPage > 1){
                    $(".weui-loadmore").show();
                }
            }
        });
    }

    function update_search_params(){
        param_json.user_name = $("#user_name").val();
        param_json.nickname = $("#nickname").val();
        param_json.reg_mobile = $("#reg_mobile").val();

        var $sex = $("input[name='sex']:checked");
        if($sex.prop("checked")){
            param_json.sex = $sex.val();
        }else{
            delete param_json['sex'];
        }

        var $vip_level = $("input[name='vip_level']:checked");
        if($vip_level.prop("checked")){
            param_json.vip_level = $vip_level.val();
        }else{
            delete param_json['vip_level'];
        }

        var $user_type = $("input[name='user_type']:checked");
        if($user_type.prop("checked")){
            param_json.user_type = $user_type.val();
        }else{
            delete param_json['user_type'];
        }

        var $user_status = $("input[name='user_status']:checked");
        if($user_status.prop("checked")){
            param_json.user_status = $user_status.val();
        }else{
            delete param_json['user_status'];
        }
    }

    $(document).ready(function(){

        $(".weui-mask").click(function(){
            $(this).removeClass("weui-mask--visible");
            $(".search_panel").hide();
        });
        $(".fa-search").click(function(){
            $(".weui-mask").addClass("weui-mask--visible");
            $(".search_panel").show();
        });
        $("#btnSearch").click(function(){
            $(".weui-mask").removeClass("weui-mask--visible");
            $(".search_panel").hide();

            update_search_params();
            param_json.page = 1;
            param_json.url = pullToRefreshUrl;
            load_data(param_json);
        });

        $("#btnReset").click(function(){
            $("#frmSearch")[0].reset();
        });

        //滚动点击加载
        $(".weui-loadmore").click(function(){
            param_json.page += 1;
            if(param_json.page > totalPage){
                return false;
            }

            $.ajax({
                type:'POST',
                dataType:"json",
                data:param_json,
                url:scrollLoadingUrl,
                success:function(result){
                    if(result.data.length > 0){
                        var template = $("#listTemplate").html();
                        var compiledTemplate = $.Template7.compile(template);
                        var html = compiledTemplate(result);

                        $("#list").append(html);

                        if(param_json.page == totalPage){
                            $(".weui-loadmore").hide();
                        }
                    }
                }
            });
        });

        //下拉刷新
        $("#scrollPage").pullToRefresh();
        $("#scrollPage").on("pull-to-refresh", function() {
            setTimeout(function() {
                param_json.page = 1;
                load_data(param_json);
                $("#scrollPage").pullToRefreshDone();
            }, 2000);
        });

    });
</script>
</body>
</html>